<template>
	<view>
		<page-meta>
			<navigation-bar :title="courtName"></navigation-bar>
		</page-meta>
		<view>选择楼栋单元</view>
		
		<view style="display: flex;flex-direction: row">
			<xflSelect v-model="curbuild" class="scale" placeholder="楼号" :items="builds" labelField="name" valueField="no"></xflSelect>
			<xflSelect v-model="curunit" class="scale" placeholder="单元" :items="builds[curbuild].unit" suffix="单元"></xflSelect>
			<button @tap="query" class="fixed" style="background: #007AFF;color: white;" size="mini">查询</button>
		</view>
		
		<table class="card" style="padding: 0;">
			<thead>
				<tr>
					<th>房号</th>
					<th>上次读数</th>
					<th>本次读数</th>
					<th>用水量</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(record, idx) in resp.list" :key="idx">
					<td>{{record.roomNo}}</td>
					<td>{{record.lastNum || 0}}</td>
					<td style="width: 150rpx;">
						<input type="text" class="bordered" confirm-type="next" confirm-hold adjust-position
						@confirm="changeNum($event, idx)" @focus="showInputHelper($event, idx)"
						:value="record.isRead==1?record.currentNum:''" :disabled="record.isRead==1" />
					</td>
					<td v-if="record.currentNum">{{(record.currentNum - record.lastNum).toFixed(2)}}</td>
					<td v-else></td>
				</tr>
			</tbody>
		</table>
<!-- 		<div class="horizontal" style="background-color: gray;margin-top: 800rpx;" v-if="inputing">
			<button size="mini" style="background-color: #007AFF;" @click="changeNum($event, inputingId)">下一个</button>
			<button size="mini" style="background-color: #007AFF;" @click="changeNum($event, inputingId);inputing=false">完成</button>
			<button size="mini" style="background-color: #007AFF;" @click="inputing=false">隐藏</button>
		</div> -->
	</view>
</template>

<script>
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	
	const app = getApp()
	export default {
		components:{
			xflSelect, 
		},
		mixins:[],
		data() {
			return {
				inputing: false,				// 本次读数是否正在编辑
				inputingId: -1,					// 正在编辑的索引
				task:'',
				court:'',
				courtName:'',
				units:[],
				builds:[],
				curList: [],
				curbuild: -1,					// 当前选择的楼栋
				curunit: -1,					// 当前选择的单元
				resp: {
					pageNum: 1,
					pageSize: 10,
					totalPage: -1,
					total: -1,
					list: [

					],
				},
				
			}
		},
		computed:{
			
		},
		filters:{
			list(eles=[], key="value"){
				console.log("sss")
				return eles.map(ele=>ele[key])
			},
			mapfix(objs=[], key='value', suffix='', prefix=''){
				return objs.map(obj=>`${prefix}${obj[key]}${suffix}`)
			},
			mapidx(obj={}, key="count", start=1, suffix='', prefix=''){
				const list = []
				for (let i = start; i <= obj[key]; i++) {
					list.push(`${prefix}${i}${suffix}`)
				}
				return list
			}
		},
		onLoad(opts) {
			this.task = opts.task
			this.court = opts.court
			this.courtName = opts.name
			console.log(opts.court)
			uni.showLoading({
				title:'加载中...'
			})
			this.pullNewRecord(this.resp, app.globalData.domain + 'waterMeterRoom', {
				meterCourtId: this.task,
			})
			// 获取楼栋单元
			uni.request({
				header:{
					Authorization: 'Bearer ' + app.globalData.token,
				},
				url:app.globalData.domain+'building/listByCourtId',
				method: 'GET',
				data: {
					courtId: opts.court,
				},
				success: res => {
					const {data} = res
					console.log(data)
					if(data.code==200){
						this.builds = data.data
						this.units.push(data.data.map(build=>{
							return build.name
						}))
						this.units.push([])
						for (let i = 0; i < this.builds[0].unit; i++) {
							this.units[1].push(`${i+1}单元`)
						}
					}else if(data.code==500){
						uni.showToast({
							icon:'none',
							title: data.message,
						});
					}
				},
				fail: (err) => {console.error(err)},
				complete: () => {}
			});
		},
		methods: {
			handleBuildChange(evt){
				const {index} = evt
				this.curbuild = index
			},
			handleUnitChange(evt){
				const {index} = evt
				this.curunit = index
			},
			hideInputHelper(evt, idx){
				this.inputing=false
				this.inputingId=-1
			},
			showInputHelper(evt, idx){
				this.inputing=true
				this.inputingId=idx
			},
			changeNum(evt, idx){
				const value = evt.detail.value
				const record = this.resp.list[idx]
				record.currentNum = Number.parseFloat(value)
				if(record.lefts==undefined){
					this.$set(record, 'lefts', 2)
				}
				record.lefts--
				const id = record.id
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.domain + 'waterMeterRoom',
					method: 'POST',
					data: {
						id,
						readNum: this.resp.list[this.inputingId].currentNum,
					},
					success: res => {
						const {data} = res
						console.log(data)
						if(data.code==200){
							uni.showToast({
								icon:'none',
								title:data.message,
							});
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			query(){
				console.log(this.curbuild, this.curunit+1)
				console.log(this.curbuild, this.curunit)
				this.refreshRecord(this.resp, app.globalData.domain + 'waterMeterRoom', {
					meterCourtId: this.task,
					buildingId: this.builds[this.curbuild]?this.builds[this.curbuild].id:'',
					unit: this.curunit>=0?(this.curunit+1): '',
				})
			},
			// 下拉刷新
			refreshRecord(list, url, extra = {}) {
				list.pageNum=1
				list.pageSize=10
				uni.request({
					header: {
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: 1,
						size: 10,
						...extra,
					},
					success: res => {
						const {
							data
						} = res
						console.log(data)
						if (data.code == 200) {
							const d = data.data
							list.totalPage = d.totalPage
							list.total = d.total
							list.list=[]
							list.list.push(...data.data.list)
							uni.stopPullDownRefresh()
						} else if (data.code == 500) {
							uni.showToast({
								icon: 'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {
						console.error(err)
					},
					complete: () => {}
				});
			},
			// 拉取早起的历史数据
			pullNewRecord(list, url, extra = {}, map=null, desc = false) {
				uni.request({
					header: {
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: list.pageNum || 0,
						size: list.pageSize || 10,
						...extra,
					},
					success: res => {
						const {
							data
						} = res
						uni.hideLoading()
						if (data.code == 200) {
							const d = data.data
							list.totalPage = d.totalPage
							list.total = d.total
							console.log(d)
							if(list.list.length<d.total){
								list.pageNum++
								if (d.list.length > 0) {
									if (desc) {
										list.list.unshift(...d.list.reverse())
									} else {
										list.list.push(...d.list)
									}
								}
							}
						} else if (data.code == 500) {
							uni.showToast({
								icon: 'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {
						console.error(err)
					},
				});
			},
		}
	}
</script>

<style scoped>
	picker{
		text-align: left;
		justify-content: center;
		align-items: stretch;
		border: solid 1px lightgray;
	}
	
	.bordered{
		border: solid 1px gray;
	}
</style>
